Client-Side SignalR ইন্টিগ্রেশন (JavaScript ব্যবহার করে)

Microsoft Technologies - এএসপি ডট নেট কোর (ASP.Net Core) ASP.NET Core SignalR (Real-time Communication) |
239
239

ASP.NET Core SignalR হলো একটি লাইব্রেরি, যা রিয়েল-টাইম ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য ব্যবহৃত হয়। SignalR-এর মাধ্যমে সার্ভার এবং ক্লায়েন্টের মধ্যে bidirectional communication সম্ভব হয়।

SignalR-এর ক্লায়েন্ট সাইড ইন্টিগ্রেশনের জন্য JavaScript লাইব্রেরি ব্যবহার করা হয়, যা ক্লায়েন্ট ব্রাউজার এবং সার্ভারের মধ্যে রিয়েল-টাইম যোগাযোগ সক্ষম করে।


SignalR ইন্টিগ্রেশনের ধাপসমূহ

সার্ভার সাইড সেটআপ

SignalR ব্যবহার করার জন্য প্রথমে সার্ভার সাইড সেটআপ করতে হবে।

Startup.cs এ SignalR Middleware যুক্ত করুন:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddSignalR();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<MyHub>("/myHub");
        endpoints.MapDefaultControllerRoute();
    });
}

SignalR Hub তৈরি করুন:

using Microsoft.AspNetCore.SignalR;

public class MyHub : Hub
{
    public async Task SendMessage(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

ক্লায়েন্ট সাইড সেটআপ

SignalR JavaScript লাইব্রেরি ইনস্টল করা

SignalR ক্লায়েন্ট লাইব্রেরি ডাউনলোড করার জন্য npm বা CDN ব্যবহার করতে পারেন।

npm ব্যবহার করে ইনস্টল:
npm install @microsoft/signalr
CDN ব্যবহার:

HTML ফাইলে নিচের স্ক্রিপ্ট ট্যাগ যুক্ত করুন:

<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.min.js"></script>

ক্লায়েন্ট সাইড কোড

JavaScript ব্যবহার করে SignalR Hub এর সঙ্গে সংযোগ স্থাপন

HTML ফাইল:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SignalR Chat</title>
    <script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.min.js"></script>
</head>
<body>
    <div>
        <input type="text" id="userInput" placeholder="Your Name" />
        <input type="text" id="messageInput" placeholder="Your Message" />
        <button id="sendButton">Send</button>
    </div>
    <ul id="messagesList"></ul>

    <script>
        // SignalR Hub এর সঙ্গে সংযোগ তৈরি করা
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/myHub")
            .build();

        // সংযোগ শুরু করা
        connection.start()
            .then(() => {
                console.log("Connected to SignalR Hub");
            })
            .catch(err => console.error(err.toString()));

        // সার্ভার থেকে মেসেজ গ্রহণ করা
        connection.on("ReceiveMessage", (user, message) => {
            const li = document.createElement("li");
            li.textContent = `${user}: ${message}`;
            document.getElementById("messagesList").appendChild(li);
        });

        // মেসেজ পাঠানো
        document.getElementById("sendButton").addEventListener("click", () => {
            const user = document.getElementById("userInput").value;
            const message = document.getElementById("messageInput").value;
            connection.invoke("SendMessage", user, message)
                .catch(err => console.error(err.toString()));
        });
    </script>
</body>
</html>

ব্যাখ্যা

  1. SignalR Hub সংযোগ তৈরি করা: HubConnectionBuilder ব্যবহার করে সার্ভারের Hub এর URL এর সঙ্গে সংযোগ স্থাপন করা হয়।
  2. সংযোগ শুরু করা: connection.start() ব্যবহার করে ক্লায়েন্ট এবং সার্ভারের মধ্যে সংযোগ চালু করা হয়।
  3. সার্ভার থেকে মেসেজ গ্রহণ করা: connection.on মেথড ব্যবহার করে ক্লায়েন্ট সার্ভার থেকে ডেটা গ্রহণ করে। এখানে ReceiveMessage মেথডটি ব্যবহার করা হয়েছে, যা সার্ভারের Hub এ সংজ্ঞায়িত।
  4. সার্ভারে মেসেজ পাঠানো: connection.invoke মেথড ব্যবহার করে ক্লায়েন্ট থেকে সার্ভারে ডেটা পাঠানো হয়।

ফলাফল

উপরের কোড অনুযায়ী, ক্লায়েন্ট থেকে একটি মেসেজ পাঠানো হলে সার্ভার তা গ্রহণ করে সমস্ত সংযুক্ত ক্লায়েন্টে প্রেরণ করবে।

উদাহরণ আউটপুট:

  • User1: Hello, everyone!
  • User2: Hi, User1!

SignalR ব্যবহার করার সুবিধা

  1. রিয়েল-টাইম যোগাযোগ: চ্যাট অ্যাপ, লাইভ নোটিফিকেশন, এবং রিয়েল-টাইম ডেটা আপডেট করার জন্য SignalR অত্যন্ত কার্যকর।
  2. ক্রস-প্ল্যাটফর্ম সাপোর্ট: SignalR ক্লায়েন্ট JavaScript, .NET, Java, এবং Python-এ কাজ করে।
  3. স্কেলিং সাপোর্ট: Azure SignalR Service ব্যবহার করে উচ্চ ট্র্যাফিক পরিচালনা করা সহজ।

SignalR JavaScript ইন্টিগ্রেশন ডেভেলপারদের জন্য সহজ এবং শক্তিশালী টুল যা রিয়েল-টাইম অ্যাপ্লিকেশন ডেভেলপমেন্টে নতুন মাত্রা যোগ করে।

common.content_added_by
টপ রেটেড অ্যাপ

স্যাট অ্যাকাডেমী অ্যাপ

আমাদের অল-ইন-ওয়ান মোবাইল অ্যাপের মাধ্যমে সীমাহীন শেখার সুযোগ উপভোগ করুন।

ভিডিও
লাইভ ক্লাস
এক্সাম
ডাউনলোড করুন
Promotion